import React from 'react'
import { connect } from 'dva'
import queryString from 'query-string'
import { Button, Card,Tabs } from 'antd'
import PageHeaderLayout from 'components/Layout/PageHeaderLayout'
import List from './List'
import OrderFilterExpand from 'components/Filter/OrderFilterExpand'
import OrderFilterUnExpand from 'components/Filter/OrderFilterUnExpand'
import styles from './List.less'
import { showButton } from 'utils/promissionFilter'

const receipts = ({ location, dispatch, receipt, app, loading }) => {
  location.query = queryString.parse(location.search)
  const { items, pagination, isExpand, isCashier,currentType } = receipt
  const { user, resources } = app

  const TabPane = Tabs.TabPane;

  const breadcrumbList = [
    {
      title: '财务管理',
      href: '/'
    }, {
      title: '收款单',
      href: '/receipt'
    }
  ]
  const listProps = {
    dataSource: items,
    loading: loading.effects['receipt/query'],
    pagination,
    pageChangeAction: 'receipt/query',
    dispatch,
    location,
    onShowDetail(record) {
      dispatch({
        type: 'receipt/showDetail',
        payload: {
          recordId: record.id
        }
      })
    },
    onShowAudit(record) {
      dispatch({
        type: 'receipt/showAudit',
        payload: {
          recordId: record.id
        }
      })
    },
    showAuditButton: showButton('receipt.audit', resources, user)
  }
  const filterProps = {
    filterItems: [
      {
        type: 'input',
        id: 'num',
        title: '收款单号'
      },
      {
        type: 'select',
        id: 'auditStatus',
        title: '收款单状态',
        options: [
          {
            value: 'NULL',
            name: '待审核'
          }, {
            value: 'AUDIT_FAIL',
            name: '审核未通过'
          }, {
            value: 'AUDIT_SUCCESS',
            name: '审核通过'
          }
        ]
      },
      {
        type: 'select',
        id: 'paymentType',
        title: '支付方式',
        options: [
          {
            value: 'alipay_pc_direct',
            name: '线上支付(支付宝)'
          },
          {
            value: 'wx_lite',
            name: '小程序'
          },
          {
            value: 'wx_pub_qr',
            name: '线上支付(微信)'
          }, {
            value: 'POS',
            name: 'POS'
          }
          , {
            value: '丽维家-其他',
            name: '丽维家-其他'
          }
          , {
            value: '丽维家JD',
            name: '丽维家JD'
          }
          , {
            value: '丽维家TM',
            name: '丽维家TM'
          }
          , {
            value: '丽维家微信',
            name: '丽维家微信'
          }
          , {
            value: '丽维家支付宝',
            name: '丽维家支付宝'
          }
          , {
            value: '付款返充',
            name: '付款返充'
          }
          , {
            value: '微信公众号扫码支付',
            name: '微信公众号扫码支付'
          }
          , {
            value: '扫码',
            name: '扫码'
          }
          , {
            value: '支付中心',
            name: '支付中心'
          }
          , {
            value: '支付宝 PC 网页支付',
            name: '支付宝 PC 网页支付'
          }
          , {
            value: '现金',
            name: '现金'
          }
          , {
            value: '网银',
            name: '网银'
          }
          , {
            value: '网银转账',
            name: '网银转账'
          }
          , {
            value: '调账',
            name: '调账'
          }
          , {
            value: '天猫',
            name: '天猫'
          }
          , {
            value: '京东',
            name: '京东'
          }
          , {
            value: '支付宝',
            name: '支付宝'
          }
        ]
      }, {
        type: 'input',
        id: 'paymenter',
        title: '付款方'
      },
      {
        type: 'input',
        id: 'paymentNum',
        title: '支付凭证号'
      },
      {
        type: 'input',
        id: 'received',
        title: '实收金额'
      },
      {
        type: 'dateRule',
        id: 'paymentTime',
        dateFormat: 'YYYY/MM/DD HH:mm:ss',
        title: '支付时间'
      },
      {
        type: 'dateRule',
        id: 'arrivalTime',
        dateFormat: 'YYYY/MM/DD HH:mm:ss',
        title: '到帐时间'
      }
    ],
    onFilterChange(value) {
      dispatch({
        type: 'receipt/query',
        payload: {
          ...value
        }
      })
    },
    isExpand,
    noExpand() {
      dispatch({ type: 'receipt/unExpandFilter', payload: {} })
    },
    expand() {
      dispatch({ type: 'receipt/expandFilter', payload: {} })
    }
  }
  const tabChange = (key) => {
    dispatch({
      type: 'receipt/setCurrentTab',
      payload:key
    })
    dispatch({
      type: 'receipt/query'
    })
  }

  return (
    <PageHeaderLayout title="收款单" breadcrumbList={breadcrumbList}>
      <Card bordered={false}>
        <div className={styles.tableList}>
          <OrderFilterUnExpand {...filterProps} />
          <div className={styles.tableListOperator}>
            {!isCashier && showButton('receipt.add', resources, user) &&
              <Button type="primary" icon="plus" onClick={() => {
                dispatch({
                  type: 'receipt/showAdd',
                  payload: {}
                })
              }}>添加收款单</Button>}
          </div>
          <Tabs onChange={tabChange} type="card" activeKey={currentType}>
            <TabPane tab="余额账户" key="SALES">
              <List {...listProps} />
            </TabPane>
            <TabPane tab="第三方账户" key="THIRD">
              <List {...listProps} />
            </TabPane>
            <TabPane tab="优惠券账户" key="COUPON">
              <List {...listProps} />
            </TabPane>
            <TabPane tab="小程序提现账户" key="COMMISSION">
              <List {...listProps} />
            </TabPane>
          </Tabs>
        </div>
      </Card>
    </PageHeaderLayout>

  )
}

export default connect(({ receipt, app, loading }) => ({ receipt, app, loading }))(receipts)
